<template>
	<u-modal :show="showTip" :showConfirmButton="false" :round="25" mode="bottom" @close="showTip = false"
		@open="showTip = true">
		<view class="down-tip">
			<view class="update-image">
				<image src="../../src/imgs/update-tip.png"></image>
			</view>
			<view class="progress" v-if="downLoad">
				<view class="progress-bar">
					<view class="progress-percent" :style="{width: percent + '%'}">
						<text>{{percent}}%</text>
						<image class="rocket" src="../../src/imgs/rocket.png"></image>
					</view>
				</view>
				<view class="progress-tip">新版本正在努力更新中，请稍后...</view>
			</view>
			<view class="top" v-if="!downLoad">
				<scroll-view class="update-log-container" :scroll-y="true">
					<view class="update-log" v-for="item in remark.split(';')">{{item}}</view>
				</scroll-view>
			</view>
			<view class="bottom" v-if="!downLoad">
				<view class="button confirm" @click="handleDownLoad()">立即更新</view>
				<view class="button cancel" @click="closeModal()" v-if="is_update == 2">下次更新</view>
			</view>
		</view>
	</u-modal>
</template>
<script>
	import {
		appCheckApi
	} from '@/api/common.js';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				percent: 0,
				showTip: false,
				downLoadUrl: '',
				downLoad: false,
				remark: '',
				is_update: 2

			}
		},
		computed: {
			...mapGetters({
				userInfo: 'system/getUserInfo'
			}),
		},
		methods: {
			closeModal() {
				this.showTip = false;
				this.$emit('closeUpdateAppPop');
			},
			handleDownLoad() {
				if (this.downLoad) {
					return
				}
				const _this = this;
				this.downLoad = true;

				let url = this.downLoadUrl;
				if (this.downLoadUrl === '') {
					uni.showToast({
						title: '地址获取失败',
						icon: 'error',
						duration: 1500
					})
					_this.show = false;
					return;
				}
				const downloadTask = uni.downloadFile({
					url: url,
					success: (res) => {
						_this.downLoad = false;
						if (res.statusCode === 200) {
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (res2) => {
									var savedFilePath = res.tempFilePath;
									uni.openDocument({
										filePath: savedFilePath,
										success: (res3) => {},
										fail: (res3) => {}
									});
								}
							});
						}
					},
					fail: (res) => {
						_this.downLoad = false;
					}
				});
				downloadTask.onProgressUpdate(res => {
					this.percent = res.progress;
					if (res.progress >= 100) {
						_this.showTip = false;
						_this.downLoad = false
					}
				});

			},
		},
		mounted() {
			// #ifdef  APP-PLUS
			const _this = this;
			appCheckApi({
				check_version: plus.runtime.version
			}).then(res => {
				const {
					data
				} = res
				if (data.msg === '更新版本') {
					_this.showTip = true;
					_this.downLoadUrl = data.data.download_link;
					_this.remark = data.data.remark;
					_this.is_update = data.data.is_update;
				} else {
					this.$emit('showToast', data.msg)
				}
			})
			// appCheckApi().then(res => {
			// 	console.log('111')
			// 	const { data } = res
			// 	if (data.msg === '更新版本') {
			// 		_this.showTip = true;
			// 		_this.downLoadUrl = data.data.download_link;
			// 		_this.remark = data.data.remark;
			// 	} else {
			// 		this.$emit('showToast', data.msg)
			// 	}
			// })
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ {
		.u-popup__content {
			overflow: unset !important;
		}

		.u-modal__content {
			overflow: unset !important;
			width: 650rpx;
			box-sizing: border-box;
			padding-left: 40rpx;
			padding-right: 40rpx;
		}
	}

	.progress {
		width: 570rpx;
		padding-top: 10rpx;

		.progress-bar {
			width: 100%;
			height: 38rpx;
			border-radius: 38rpx;
			overflow: hidden;
			background-color: #e2e2e2;
			margin-bottom: 40rpx;

			.progress-percent {
				background-image: linear-gradient(90deg, #4c64eb, #4ddaf2);
				height: 100%;
				border-radius: 38rpx;
				line-height: 38rpx;
				font-size: 26rpx;
				color: #fff;
				position: relative;
				text-align: right;
				box-sizing: border-box;
				padding-right: 10rpx;
				white-space: nowrap;

				.rocket {
					// position: absolute;
					// top: 7rpx;
					margin-top: 7rpx;
					width: 56rpx;
					height: 24rpx;
					margin-left: -60rpx;
					position: relative;
					left: 80rpx;
				}
			}
		}

		.progress-tip {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #767676;
		}
	}

	.down-tip {
		padding-top: 220rpx;
	}

	.update-image {
		width: 750rpx;
		height: 410rpx;
		position: absolute;
		top: -170rpx;
		left: -50rpx;

		image {
			width: 750rpx;
			height: 409rpx;
		}
	}

	.top {
		width: 100%;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.update-log-container {
			width: 100%;
			max-height: 250rpx;
		}

		.update-log {
			width: 100%;
			font-size: 28rpx;
			color: #767676;
			line-height: 32rpx;
			margin-bottom: 25rpx;
		}
	}

	.bottom {
		width: 100%;
		box-sizing: border-box;
		padding-left: 40rpx;
		padding-right: 40rpx;

		.button {
			width: 490rpx;
			height: 78rpx;
			margin-bottom: 30rpx;
			text-align: center;
			line-height: 78rpx;
			font-size: 32rpx;
			border-radius: 16rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.confirm {
			background-image: linear-gradient(90deg, #4c64eb, #4ddaf2);
			color: #fff;
		}

		.cancel {
			border: 2rpx solid #2a95ec;
			box-sizing: border-box;
			line-height: 74rpx;
			color: #2a95ec;
		}
	}
</style>
